<template>
  <el-card class="h-full max-h-full overflow-auto">
    <div>
      <el-input v-model="searchForm.Name" placeholder="请输入商品名称" class="w-96"></el-input>
      <el-select
        v-model="searchForm.Language"
        class="m-2"
        placeholder="请选择类型"
        style="width: 240px"
        @change="GetData(), searchForm.Type = ''"
      >
        <el-option
          v-for="item in languageOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="searchForm.Type"
        class="m-2"
        placeholder="请选择系列"
        style="width: 240px"
        @change="GetData()"
      >
        <el-option
          v-for="item in returnProductTypeOptions(searchForm.Language)"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <br />
      <el-button @click="GetData()">搜索</el-button>
      <el-button @click="$router.push('/home/operate-product')" type="primary">添加</el-button>
    </div>
    <el-table  :data="products" style="width: 200%; margin-top: 10px">
      <el-table-column prop="Name" label="商品名称" width="180" />
      <el-table-column prop="Type" label="商品类型" width="180" />
      <el-table-column prop="Series" label="商品系列" width="250" />
      <el-table-column prop="Language"  width="80" label="语言"></el-table-column>
      <el-table-column prop="Cover" width="220" label="轮播图">
        <template #default="{ row }">
           <div class="w-full h-20 flex overflow-x-auto" v-if="row.Cover">
             <template v-for="(item, index) of JSON.parse(row.Cover)" :key="index">
               <img class="w-full h-full object-contain" :src="item.url" :alt="item.filename">
             </template>
           </div>
        </template>
      </el-table-column>
      <el-table-column prop="SafeIcon"  width="220" label="认证">
        <template #default="{ row }">
          <div class="w-full h-20 flex overflow-x-auto" v-if="row.SafeIcon">
            <template v-for="(item, index) of JSON.parse(row.SafeIcon)" :key="index">
               <img class="w-full h-full object-contain" :src="item.url" :alt="item.filename">
             </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="110" label="创建时间">
        <template #default="scope">
          {{ useDayjsFormateDate().value(scope.row.CreatedAt) }}
        </template>
      </el-table-column>
      <el-table-column width="110" label="更新时间">
        <template #default="scope">
          {{ useDayjsFormateDate().value(scope.row.UpdatedAt) }}
        </template>
      </el-table-column>
      <el-table-column width="200" label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="HandleEditClick(scope.row, 'copy')">复制</el-button>
          <el-button size="small" type="primary" @click="HandleEditClick(scope.row, 'edit')">编辑</el-button>
          <el-popconfirm @confirm="HandlerDeleteClick(scope.row)" title="是否删除该文章">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup lang="ts">
import { DeleteProductService, FindProductService } from '@/service'
import { reactive, onMounted, ref, onUnmounted } from 'vue'
import { useDayjsFormateDate } from '@/hooks'
import { languageOptions, returnProductTypeOptions } from '@/utils'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { useRoute } from 'vue-router'
const searchForm = reactive({
  Language: 'zh',
  Type: "测量传感器",
  Name: ''
})
const route = useRoute()
const products = ref<any[]>([])
async function HandlerDeleteClick(row: any) {
  const res = await DeleteProductService(row)
  ElMessage({
    type: res.code === 0 ? "success" : "error",
    message: res.msg
  })
  res.code === 0 &&  await GetData()
}
async function GetData() {
  const res = await FindProductService({...searchForm})
  products.value = res.data
  router.push("")
}
const HandleEditClick = (row: any, operate: string) => {
  if (operate === "edit") {
    router.push(`/home/operate-product?id=${row.ID}&type=${row.Type}&operate=${operate}`)
    return;
  }
  router.push(`/home/operate-product?id=${row.ID}&type=${row.Type}&operate=${operate}`)
}
function KeyDown(evt: any) {
    if (evt.code == "Enter") {
      GetData()
    }
} 
onMounted(async () => {
  route.query.lng && (searchForm.Language = route.query.lng as string)
  route.query.type && (searchForm.Type = route.query.type as string ?? "测量传感器")
  document.addEventListener("keydown",KeyDown)
  await GetData();
})
onUnmounted(() => {
  document.removeEventListener("keydown",KeyDown)
})
</script>

<style scoped></style>
